<script>
import request from "../../utils/Request.js";
import { ElMessage } from "element-plus";
import { MdPreview } from "md-editor-v3";
import "md-editor-v3/lib/style.css";

export default {
  name: "ApiView",
  components: {
    MdPreview,
  },
  props: {
    id: String,
    apiContents: Object,
    apiTags: Array,
  },
  watch: {
    id(oV, nV) {
      if (oV !== nV) {
        this.getTagList();
        this.getApiData();
      }
    },
  },
  data() {
    return {
      tags: [
        {
          id: 1,
          name: "tag1",
          color: "#123456",
        },
        {
          id: 1,
          name: "tag2",
          color: "blue",
        },
        {
          id: 1,
          name: "tag3",
          color: "red",
        },
      ],
      apiData: {
        url: "",
        method: "POST",
        contents: [
          {
            id: 1,
            label: "参数",
            type: 0,
            order: 1,
            params: [
              {
                // id: 1,
                name: "can",
                type: "String",
                need: true,
              },
            ],
          },
          {
            id: 2,
            label: "描述",
            type: 1,
            content: "content",
            order: 2,
          },
        ],
        description: "这是一段描述",
      },
    };
  },
  methods: {
    getTagList() {
      request({
        url: "/api/project/api/tag/list",
        method: "post",
        data: {
          id: this.id,
          projectId: this.$route.params.projectId,
        },
      }).then(({ data }) => {
        if (data.code === 0) {
          this.tags = data.data;
        } else {
          ElMessage.error("获取文档标签异常");
        }
      });
    },

    getApiData() {
      request({
        url: "/api/project/api/data",
        method: "post",
        data: {
          id: this.id,
          projectId: this.$route.params.projectId,
        },
      }).then(({ data }) => {
        if (data.code === 0) {
          this.apiData = data.data;
          if (this.apiData != null && this.apiData.contents != null) {
            for (let i = 0; i < this.apiData.contents.length; i++) {
              if (this.apiData.contents[i].type === 0) {
                this.apiData.contents[i].params = JSON.parse(
                  this.apiData.contents[i].params
                );
              }
            }
          }
        } else {
          ElMessage.error("获取文档数据异常");
        }
      });
    },
  },

  created() {
    if (this.apiTags != null) {
      this.tags = this.apiTags;
      // delete this.apiTags;
    } else {
      this.getTagList();
    }

    if (this.apiContents != null) {
      // console.log(this.apiContents);
      this.apiData = this.apiContents;
      if (this.apiData != null && this.apiData.contents != null) {
        for (let i = 0; i < this.apiData.contents.length; i++) {
          if (this.apiData.contents[i].type === 0) {
            this.apiData.contents[i].params = JSON.parse(
              this.apiData.contents[i].params
            );
          }
        }
      }
      // delete this.apiContents;
    } else {
      this.getApiData();
    }
  },
};
</script>

<template>
  <el-row v-if="tags.length !== 0" style="margin-bottom: 20px">
    <el-tag
      v-for="tag in tags"
      style="margin-right: 5px; box-shadow: 0 0 0 0; border: none"
      :key="tag.id"
      :color="tag.color"
      effect="dark"
      size="small"
    >
      {{ tag.name }}
    </el-tag>
  </el-row>

  <el-row style="margin-bottom: 20px">
    <el-tag
      size="large"
      type="success"
      style="margin-right: 5px; min-width: 80px"
      >{{ apiData.method }}</el-tag
    >
    <el-tag size="large" type="info" style="min-width: 300px">{{
      apiData.url
    }}</el-tag>
  </el-row>

  <span style="margin-bottom: 20px" v-if="apiData.description !== ''">
    <el-row style="margin-bottom: 20px">
      <el-text type="info" size="large">描述</el-text>
    </el-row>
    <el-row>
      <el-text>{{ apiData.description }}</el-text>
      <el-divider style="margin-top: 10px" />
    </el-row>
  </span>

  <span v-for="(content, index) in apiData.contents" :key="content.id">
    <el-row>
      <el-text type="info" size="large">{{ content.label }}</el-text>
    </el-row>
    <!--    param-->
    <el-row v-if="content.type === 0" style="margin-bottom: 20px">
      <el-table :data="content.params" style="width: 100%">
        <el-table-column prop="name" label="参数名" width="300" />
        <el-table-column prop="type" label="类型" width="180" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="need" label="必需" width="70">
          <template #default="{ row }">
            <span v-if="row.need">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!--content-->
    <el-row v-if="content.type === 1" style="margin-bottom: 20px; width: 100%">
      <!-- <el-text v-html="markdown.render(content.content == null ? '' : content.content)" style="width: 100%;"></el-text> -->
      <MdPreview
        :editorId="'md-p-api' + id"
        :modelValue="content.content == null ? '' : content.content"
      />
    </el-row>
  </span>
</template>

<style>
</style>